<template>
  <div>
    <div class="contact-map">
      <div class="map-l">
        <baidu-map class="bm-view"></baidu-map>
      </div>
      <div class="map-r">
        <div class="mapAddress">
          <h1 class="addressTitle">{{ addressTitle }}</h1>
          <div class="pt10">
            <!--                <p>联系人：刘老师</p>-->
            <p>地址：{{ address }}</p>
            <p>
              咨询电话：{{ phone1 }}<br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              {{ phone2 }}
            </p>
            <p>E-mail：{{ mail }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="zera">
      <Title title="中心介绍"></Title>
      <div class="zera-container">
        <div class="zera-l">
          <img src="@/assets/images/contact/bjt.png" alt="" />
        </div>
        <div class="zera-r">
          <p>
            {{ jianjie }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/views/components/index/indexTitle.vue";
// import { baiduMap } from "@/utils/baiduMap.js";
export default {
  components: {
    Title,
  },
  mounted() {
    this.init();
    // const ak = "7f2bfc6f4602138bc556be07949ef1ee";
    // baiduMap(ak).then(() => {
    //   this.createMap(); // 创建地图
    // });
  },
  data() {
    return {
      addressTitle: "中国艺术职业教育学会培训中心",
      address: "北京市朝阳区高碑店村一区40-9",
      phone1: "010-59440991（座机）",
      phone2: "18612387770（手机）",
      mail: "cefatc2021@163.com",
      jianjie:
        "中国艺术职业教育学会培训中心(英文简称:CEFA-TC)是由中国艺术职业教育学会举办，经国家教育主管部门批准具备办学许可的独立法人事业单位。中国艺术职业教育学会(英文简称:CEFA)于1986年筹建，1994年在民政部正式登记，由文化和旅游部主管，文化和旅游部科技教育司负责业务指导。",
    };
  },
  methods: {
    init({ BMap, map }) {
      this.map = map;
      var point = new BMap.Point(116.532413, 39.911067);
      map.centerAndZoom(point, 15); //
      map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //鼠标滚动缩放
    },
  },
  created() {},
};
</script>

<style>
@import "../assets/index.css";
.contact-map {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.map-l {
  width: 720px;
  height: 396px;
  background: #cdcdcd;
  padding: 10px;
}
.mapAddress {
  background: url("~@/assets/images/contact/contactright.png") no-repeat center
    center;
  background-size: 100% 100%;
  width: 442px;
  height: 416px;
}
.mapAddress .addressTitle {
  height: 50px;
  line-height: 50px;
  padding-left: 45px;
  background: url("~@/assets/images/contact//loction01.png") no-repeat 15px
    center #1d4e99;
  border-bottom: 2px solid #bf9c59;
  font-size: 18px;
  color: #fff;
}
.mapAddress p {
  padding: 0 25px;
  font-size: 18px;
  color: #333;
  margin-top: 25px;
  font-weight: 800;
  line-height: 40px;
}
.zera {
  width: 1200px;
  margin: 40px auto;
}
.zera-container {
  display: flex;
  justify-content: space-between;
}
.zera-l {
  width: 301px;
  height: 414px;
  background: #eee;
  text-align: center;
  line-height: 414px;
}
.zera-r {
  width: 884px;
  height: 414px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(220, 220, 220, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10%;
  padding-right: 10%;
}
.zera-r p {
  line-height: 2em;
  font-size: 14px;
}
@media screen and (max-width: 760px) {
  .contact-map {
    width: 100%;
    flex-wrap: wrap;
  }
  .map-l {
    width: 98%;
    margin: 0px auto;
    height: auto;
  }
  .map-r {
    width: 98%;
    margin: 20px auto -20px;
    height: auto;
  }
  .mapAddress {
    width: 100%;
    padding-bottom: 25px;
    height: auto;
  }
  .mapAddress .addressTitle {
    font-size: 16px;
  }
  .mapAddress p {
    font-size: 14px;
    line-height: 22px;
  }
  .zera {
    width: 100%;
    margin: 0px auto;
  }
  .zera-container {
    flex-wrap: wrap;
  }
  .zera-l {
    width: 100%;
    height: auto;
    line-height: 100%;
    display: none;
  }
  .zera-r {
    width: 100%;
    height: auto;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
</style>
